<%--
  Created by IntelliJ IDEA.
  User: 40167
  Date: 2023/12/16
  Time: 12:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<jsp:include page="head.jsp"></jsp:include>
<body>
<jsp:include page="navbar_head.jsp"></jsp:include>

<div class="container-fluid">
    <jsp:include page="navbar.jsp"></jsp:include>
    <div class="col-md-9 main">
        <form class="main" action="${pageContext.request.contextPath}/admin/cinema_add">
            <div class="form-group">
                <label for="cinema_name">电影院名称</label>
                <input type="text" class="form-control" name="cinema_name" id="cinema_name"
                       placeholder="请输入电影院名称...">
            </div>
            <div class="form-group">
                <label for="location">电影院位置</label>
                <input type="text" class="form-control" name="location" id="location" placeholder="请输入电影院位置...">
            </div>
            <div class="form-group">
                <label for="capacity">电影院容量</label>
                <input type="text" id="capacity" name="capacity" class="form-control" placeholder="请输入电影院容量...">
            </div>

            <div id="alert_div" class="alert alert-danger" role="alert">
                <c:if test="${!empty failMsg}">
                    <strong>错误!</strong> ${failMsg}
                </c:if>
            </div>

            <button type="submit" class="btn btn-default" id="submit_btn">确认新增</button>
        </form>
    </div>
    <jsp:include page="script.jsp"></jsp:include>
    <script>
        $(function () {
            if (${empty failMsg}) {
                // 隐藏错误消息提示框
                $("#alert_div").hide();
            }
            $("#submit_btn").click(function () {
                // 验证用户名：必须由字母、数字、下划线、-组成，并且长度为4到16位
                // 获取用户名输入框里的内容
                var cinema_name = $("#cinema_name").val();
                // 使用test方法验证
                if (cinema_name === "") {
                    // 提示用户结果
                    $("#alert_div").html("<strong>数据校验不通过！</strong> 请输入电影院名！");
                    $("#alert_div").show();
                    return false;
                }

                // 验证姓名：不能为空
                var location = $("#location").val();
                if (location === "") {
                    // 提示用户结果
                    $("#alert_div").html("<strong>数据校验不通过！</strong> 电影院位置不能为空！");
                    $("#alert_div").show();
                    return false;
                }


                // 验证手机：13xxxxxxxxx
                var capacity = $("#capacity").val();
                if (capacity === "") {
                    // 提示用户结果
                    $("#alert_div").html("<strong>数据校验不通过！</strong> 电影院容量不能为空！");
                    $("#alert_div").show();
                    return false;
                }
            });
        });
    </script>
</body>
</html>
